<!-- 运输中检查 -->
<template>
	<view class="tab-box">
		<!-- 导航 -->
		<view class="tab-menu">
			<view v-for="(item,index) in tabList" :key="index" :class="{'cur':swiperIndex==index,'tab-menu-item':true}"
				@tap="swiperIndex = index">
				<text class="text short-text">{{item.label}}</text>
			</view>
		</view>

		<!-- 内容 -->
		<swiper :autoplay="false" :current="swiperIndex" :skip-hidden-item-layout="true" @change="swiperChange">
			<swiper-item :key="index" v-for="(item,index) in tabList">
				<inTransitInspect :param="param" class="content-box" v-if="item.isInit && item.component=='inTransitInspect'"/>
				<stopReset :param="param" class="content-box" v-else-if="item.isInit && item.component=='stopReset'"/>
				<temporaryStop :param="param" class="content-box" v-else-if="item.isInit && item.component=='temporaryStop'"/>
			</swiper-item>
		</swiper>

	</view>
</template>
<script>
	import inTransitInspect from './component/in-transit-inspect.vue'
	import stopReset from './component/stop-reset.vue'
	import temporaryStop from './component/temporary-stop.vue'
	export default {
		components: {
			inTransitInspect,
			stopReset,
			temporaryStop,
		},
		data() {
			return {
				param: {
					lat: '',
					lon: ''
				},
				swiperIndex: 0,
				tabList: [{
					label: '运输中检查',
					isInit: true,
					component: 'inTransitInspect'
				}, {
					label: '停车休息',
					isInit: false,
					component: 'stopReset'
				}, {
					label: '临时停靠',
					isInit: false,
					component: 'temporaryStop'
				}]
			}
		},
		onLoad(option) {
			// console.log(option)
			this.param = JSON.parse(option.param);
			uni.getLocation({
				success: (location) => {
					this.param.lat = location.latitude;
					this.param.lon = location.longitude;
				}
			})
		},
		methods: {
			swiperChange(event) {
				const index = event.detail.current;
				this.swiperIndex = index;
				this.tabList[index]['isInit'] = true;
			}
		},
	}
</script>

<style lang="scss" scoped>
	.tab-box {
		.tab-menu {
			background: #fcd95f;
			display: flex;

			.tab-menu-item {
				flex: 1;
				text-align: center;

				.text {
					line-height: 3em;
					font-size: 32rpx;
					display: inline-block;
				}

				&.cur {
					font-weight: bold;
					position: relative;

					&::after {
						content: "";
						position: absolute;
						width: 32rpx;
						bottom: 0;
						left: 50%;
						transform: translateX(-50%);
						border-bottom: 6rpx solid #333333;
					}
				}
			}
		}

		uni-swiper {
			height: calc(100vh - 96rpx);

			.content-box {
				height: 100%;
				overflow: auto;
				box-sizing: border-box;
				padding: 20rpx;
			}
		}
	}
</style>
